import React from 'react'
import styled from 'styled-components'

import Color from '../Color'

const Button = props => {
    const { children, ...restProps } = props
    return <BaseButton {...restProps}>{children}</BaseButton>
}

const BaseButton = styled.button`
    height: 37px;
    background: ${({ type }) => (type ? Color[type] : 'white')};
    color: ${({ color }) => (color ? Color[color] : Color['dark'])};
    text-align: center;
    font-size: 16px;
    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
    padding: 0 20px;
    border: none;
    border-radius: 5px;
    cursor: ${({ notAllowed }) => (notAllowed ? 'not-allowed' : 'pointer')};
    &:focus,
    &:active {
        border: none;
        outline: none;
    }
`

export default Button

export const GradientButton = props => {
    const { hovered, children, ...restProps } = props
    return hovered ? (
        <HoverContainer {...restProps}>{children}</HoverContainer>
    ) : (
        <Container {...restProps}>{children}</Container>
    )
}

const Container = styled(Button)`
    height: ${({ fullHeight }) => (fullHeight ? fullHeight : '36px')};
    min-width: ${({ minWidth }) => (minWidth ? minWidth : '0')};
    border: ${({ borderWidth }) => (borderWidth ? borderWidth : '0')} solid
        ${({ isPurple }) =>
            !isPurple
                ? Color.linearGradienGreen.left
                : Color.linearGradienPurple.left};
    border-radius: ${({ radius, height }) =>
        radius ? (height ? height / 2 + 'px' : '18px') : 0};

    background: none;
    font-size: 15px;
    &:focus {
        outline: none;
    }
    &:hover {
        background: linear-gradient(
            to right,
            ${({ isPurple }) =>
                !isPurple
                    ? Color.linearGradienGreen.left
                    : Color.linearGradienPurple.left},
            ${({ isPurple }) =>
                !isPurple
                    ? Color.linearGradienGreen.right
                    : Color.linearGradienPurple.right}
        );
        color: ${Color['white']};
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }
`

const HoverContainer = styled(Button)`
    height: ${({ fullHeight }) => (fullHeight ? fullHeight : '36px')}
    width: ${({ fullWidth }) => (fullWidth ? fullWidth : 'auto')}
    min-width: ${({ minWidth }) => (minWidth ? minWidth : '0')};
    border-radius: ${({ radius, height }) =>
        radius ? (height ? height / 2 + 'px' : '18px') : 0};
    color: ${Color['white']};
    font-size: 15px;
    &:focus{
          outline: none;
    }
    background: linear-gradient(
        to right,
            ${({ isPurple }) =>
                !isPurple
                    ? Color.linearGradienGreen.left
                    : Color.linearGradienPurple.left} ,
            ${({ isPurple }) =>
                !isPurple
                    ? Color.linearGradienGreen.right
                    : Color.linearGradienPurple.right}
    );
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    
`



// WEBPACK FOOTER //
// ./src/components/Button/index.js